let data = [
    { roleNumber: "0001", roleName: '王培培', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0002", roleName: '王培培1', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0003", roleName: '王培培2', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0004", roleName: '王培培3', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0005", roleName: '王培培4', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0006", roleName: '王培培5', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0007", roleName: '王培培43', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0008", roleName: '王培培6', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0009", roleName: '王培培57', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0010", roleName: '王培培8', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0011", roleName: '王培培95', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0012", roleName: '王培培34', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0013", roleName: '王培培8', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0014", roleName: '王培培4', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0015", roleName: '王培培88', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0016", roleName: '王培培45', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0017", roleName: '王培培2', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0018", roleName: '王培培8', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0019", roleName: '王培培9', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0020", roleName: '王培培2', state: true, Creator: "ipei", creationTime: getTimer(), idKick: " " },
    { roleNumber: "0021", roleName: '王培培46', state: false, Creator: "ipei", creationTime: getTimer(), idKick: " " },
];
function toDup(i) {
    return i >= 10 ? i : "0" + i;
}
function getTimer() {
    var timer = new Date();
    var y = timer.getFullYear();
    var M = timer.getMonth() + 1;
    var d = timer.getDate();
    return y + "-" + toDup(M) + "-" + toDup(d);
}
let page = 1;
const strip = 8;
let dataClone = cloneArr(data);
let tbody = document.querySelector(".content-content>div>table>tbody");
let pagination = document.querySelector(".content-content>div>div>div:nth-child(2)");
let formBtn = document.querySelectorAll(".content-content>div>form>button");
let inquire = cloneArr(dataClone);
let inquireoff = false;
let kickoff = false;
let inputValue = true;
let online = false;
let idRevise = 0;
let reviseoff = false;
function cloneArr(obj) {
    return JSON.parse(JSON.stringify(obj));
}

function render(data) {
    tbody.innerHTML = "";
    pagination.innerHTML = "";
    for (let i = 0; i < data.length; i++) {
        data[i].id = i;
    }
    let sli = data.slice((page - 1) * strip, page * strip);
    for (let i = 0; i < sli.length; i++) {
        let tr = document.createElement("tr");
        tr.dataset.id = sli[i].id;
        tr.innerHTML = `
            <td><input type="checkbox" ${sli[i].idKick}></td>
            <td>${sli[i].roleNumber}</td>
            <td>${sli[i].roleName}</td>
            <td>
                <div class="divState">
                    <div></div>
                </div>
            </td>
            <td>${sli[i].Creator}</td>
            <td>${sli[i].creationTime}</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        `;
        tbody.appendChild(tr);
        if (sli[i].state) {
            tr.children[3].children[0].children[0].style.left = tr.children[3].children[0].offsetWidth - tr.children[3].children[0].children[0].offsetWidth - 1 + "px";
            tr.children[3].children[0].style.backgroundColor = "#1890ff";
        }
    }
    for (let i = 1; i <= Math.ceil(data.length / strip); i++) {
        let div = document.createElement('div');
        div.innerHTML = i;
        if (page == i) {
            div.style.backgroundColor = "#1890ff";
        }
        pagination.appendChild(div);
    }
    let divState = document.querySelectorAll(".divState");
    for (let i = 0; i < divState.length; i++) {
        divState[i].addEventListener("click", function (e) {
            this.children[0].style.transition = "all .3s";
            this.style.transition = "all .3s";
            if (this.children[0].offsetLeft == 1) {
                this.children[0].style.left = this.offsetWidth - this.children[0].offsetWidth - 1 + "px";
                this.style.backgroundColor = "#1890ff";
                data[this.parentNode.parentNode.dataset.id].state = true;
            } else {
                this.children[0].style.left = "1px";
                this.style.backgroundColor = "";
                data[this.parentNode.parentNode.dataset.id].state = false;
            }
        });
    }
    if (page == 1) {
        pagination.parentNode.children[0].style.display = "none";
    } else {
        pagination.parentNode.children[0].style.display = "flex";
    }
    if (page == Math.ceil(data.length / strip)) {
        pagination.parentNode.children[2].style.display = "none";
    } else {
        pagination.parentNode.children[2].style.display = "flex";
    }
} render(dataClone);
function paginationClick(e) {
    if (e.target.innerText == "<") {
        page--;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    } else if (e.target.innerText == ">") {
        page++;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    } else if (e.target.parentNode == pagination) {
        page = e.target.innerText;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    }
}
function formBtnInquire(e) {
    page = 1;
    inquireoff = true;
    e.preventDefault();
    let formInput = document.querySelectorAll('.content-content>div>form>div>input');
    let formSelect = document.querySelectorAll('.content-content>div>form>div .divSelect>div:first-child');
    inquire = dataClone;
    if (formInput[0].value == "" || (formInput[0].value).trim() == "") {
        inquire = inquire;
    } else {
        inquire = dataClone.filter(function (d) { return d.roleName.includes(formInput[0].value) });
    }
    if (formSelect[0].innerText == "请选择") {
        inquire = inquire;
    } else {
        inquire = inquire.filter(function (d) { return d.state == (formSelect[0].innerText == "启用" ? true : false) });
    }
    render(inquire);
}
function formBtnReset(e) {
    let formInput = document.querySelectorAll('.content-content>div>form>div>input');
    let formSelect = document.querySelectorAll('.content-content>div>form>div .divSelect>div:first-child');
    e.preventDefault();
    tsk("确定重置吗？", function () {
        formInput[0].value = "";
        formSelect[0].innerText = "请选择";
        inquireoff = false;
        dataClone = cloneArr(data);
        render(dataClone);
    });
}
function formBtnKick(e) {
    inquireoff = false;
    e.preventDefault();
    tsk("确定删除所选内容?", function () {
        dataClone = dataClone.filter(function (a) {
            return a.idKick == " ";
        })
        render(dataClone);
    });
}
function tBodyDel(e) {
    dataClone.splice(e.target.parentNode.parentNode.dataset.id, 1);
    render(dataClone);
}
function tBody(e) {
    if (e.target.innerText == "删除" && e.target.parentNode.parentNode.parentNode == tbody) {
        tsk("确定删除吗？", function () {
            inquireoff = false;
            tBodyDel(e);
        });
    } else if (e.target.innerText == "修改" && e.target.parentNode.parentNode.parentNode == tbody) {
        idRevise = 0;
        formBtnNew(e, formRevise);
    } else if (e.target.nodeName == "INPUT" && e.target.parentNode.parentNode.parentNode == tbody) {
        if(inquireoff){
            if (inquire[e.target.parentNode.parentNode.dataset.id].idKick == " ") {
                inquire[e.target.parentNode.parentNode.dataset.id].idKick = "checked";
            } else if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == "checked") {
                inquire[e.target.parentNode.parentNode.dataset.id].idKick = " ";
            }
        }else{
            if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == " ") {
                dataClone[e.target.parentNode.parentNode.dataset.id].idKick = "checked";
            } else if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == "checked") {
                dataClone[e.target.parentNode.parentNode.dataset.id].idKick = " ";
            }
        }
    }
    function formRevise() {
        let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
        let disStateTsk = document.querySelector(".tskForm>div>div:last-child>.divState");
        let tskFormDate = document.querySelector(".tskForm>div>div>input[type='Date']");
        idRevise = e.target.parentNode.parentNode.dataset.id;
        tskFormInput[0].value = dataClone[e.target.parentNode.parentNode.dataset.id].roleNumber;
        tskFormInput[1].value = dataClone[e.target.parentNode.parentNode.dataset.id].roleName;
        tskFormInput[2].value = dataClone[e.target.parentNode.parentNode.dataset.id].Creator;
        tskFormDate.value = dataClone[e.target.parentNode.parentNode.dataset.id].creationTime;
        if (dataClone[e.target.parentNode.parentNode.dataset.id].state) {
            disStateTsk.children[0].style.left = disStateTsk.offsetWidth - disStateTsk.children[0].offsetWidth - 1 + "px";
            disStateTsk.style.backgroundColor = "#1890ff";
            online = true;
        } else {
            disStateTsk.children[0].style.left = "1px";
            disStateTsk.style.backgroundColor = "";
            online = false;
        }
    }
}
function formNew() {
    tsk(`<div class="tskForm">
            <div>
            <span>角色编号：</span>
                <div>
                    <input type="text" placeholder="请输入(0001)的4-8位数"/>
                </div>
            </div>
            <div>
            <span>角色名称：</span>
                <div>
                    <input type="text" placeholder="请输入2-6位汉字" />
                </div>
            </div>
            <div>
            <span>创建人：</span>
                <div>
                    <input type="text" placeholder="请输入" />
                </div>
            </div>
            <div>
            <span>创建时间：</span>
                <div>
                    <input type="Date" placeholder="请选择日期" />
                </div>
            </div>
            <div>
            <span>状态：</span><div><div class="divState"><div></div></div></div>
            </div>
        </div>`, function () {
        let isnull = false;
        let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
        let tskFormDate = document.querySelector(".tskForm>div>div>input[type='Date']");
        for (let i = 0; i < tskFormInput.length; i++) {
            if (tskFormInput[i].value == "" || tskFormDate.value == "") {
                isnull = true;
            }
        }
        if (isnull) {
            tsk("不能为空");
        } else {
            if (inputValue) {
                let inp = { roleNumber: tskFormInput[0].value, roleName: tskFormInput[1].value, state: online, Creator: tskFormInput[2].value, creationTime: tskFormDate.value, idKick: " " };
                if (reviseoff) {
                    dataClone.splice(idRevise, 1, inp);
                } else {
                    dataClone.splice(0, 0, inp);
                }
                render(dataClone);
            } else {
                tsk("请正确输入");
            }
        }
    });
}
function formBtnNew(e, fun) {
    inquireoff = false;
    inputValue = true;
    online = false;
    e.preventDefault();
    if (fun) {
        reviseoff = true;
    } else {
        reviseoff = false;
    }
    formNew();
    fun && fun();
    let disStateTsk = document.querySelector(".tskForm>div>div:last-child>.divState");
    let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
    disStateTsk.addEventListener("click", function (e) {
        this.children[0].style.transition = "all .3s";
        this.style.transition = "all .3s";
        if (this.children[0].offsetLeft == 1) {
            this.children[0].style.left = this.offsetWidth - this.children[0].offsetWidth - 1 + "px";
            this.style.backgroundColor = "#1890ff";
            online = true;
        } else {
            this.children[0].style.left = "1px";
            this.style.backgroundColor = "";
            online = false;
        }
    });
    let rule = [
        { reg: /^[0-9]{4,8}$/g },
        { reg: /^[\u4E00-\u9FA5]{1,6}$/g },
        { reg: /^[0-9A-z\u4E00-\u9FA5]+$/g }
    ];
    for (var i = 0; i < tskFormInput.length; i++) {
        (function (p) {
            tskFormInput[i].addEventListener("input", function (e) {
                if (rule[p].reg.test(this.value)) {
                    inputValue = true;
                    tskFormInput[p].style.boxShadow = "0 0 5px #3c763d";
                } else if (rule[p].reg.test(this.value) == false) {
                    inputValue = false;
                    tskFormInput[p].style.boxShadow = "0 0 5px #ab4a48";
                }
            });
        })(i);
    }
}
document.querySelector(".content-content>div>table>thead>tr>th:first-child>div").addEventListener("click", function (e) {
    if (kickoff == true) {
        if(inquireoff){
            inquire = inquire.filter(function (a) {
                return a.idKick = " ";
            });
        }else{
            dataClone = dataClone.filter(function (a) {
                return a.idKick = " ";
            });
        }
        kickoff = false;
    } else if (kickoff == false) {
        if(inquireoff){
            inquire = inquire.filter(function (a) {
                return a.idKick = "checked";
            });
        }else{
            dataClone = dataClone.filter(function (a) {
                return a.idKick = "checked";
            });
        }
        kickoff = true;
    }
    if(inquireoff){
        render(inquire);
    }else{
        render(dataClone);
    }
});
formBtn[0].addEventListener("click", formBtnInquire);
formBtn[1].addEventListener("click", formBtnReset);
formBtn[2].addEventListener("click", formBtnNew);
formBtn[3].addEventListener("click", formBtnKick);
pagination.parentNode.addEventListener('click', paginationClick);
tbody.addEventListener("click", tBody);
